<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
<style type="text/css">
	.box{
		box-sizing: border-box;
		position: relative;
		padding:50px 0 130px;
		margin:0 auto;
		width: 604px;
		height: 730px;
		/*background: red;*/
	}
	h2{
		
		text-align: center;
	}
	input{
		margin:0 10px;
		border:1px solid #ccc;
		color: #666;
		padding:0 5px;
		font-size: 18px;
		height:27px; 
		width: 270px;
		line-height: 30px;
	}
	img{
		position: absolute;
		display:inline-block;
		width:62px;
		height: 30px; 
	}
	.reg p{
		box-shadow: 1px 0px 0px #a6a6a6;
		font-weight: bold;
		z-index: 1;
		position: absolute;
		margin-bottom: 0;
		background: #fff;
		line-height: 40px;
		text-align: center;
		height: 40px;
		width: 120px;
		display: block;
		border:1px solid #e5e5e5;
		border-bottom: none;
	}
	.box-a{
		box-shadow: 1px 0px 0px #a6a6a6;
		box-sizing: border-box;
		position: absolute;
		top:174px;
		width: 603px;
		height: 445px;
		background: #fff;
		border: 1px solid #e5e5e5;
	}
	.box-b{
		box-sizing: border-box;
		padding: 46px 0 30px 48px;
		width: 603px;
		height: 438px;
	}
	.span-1{
		text-align: right;
		font-size: 14px;
		display:inline-block;
		width: 70px;
		height: 30px;
	}
	.span-a{
		margin-right: 10px;
		color: #bbb;
		font-size: 12px;
		background:#f5f5f5 ;
		margin-left: 80px;
		border:1px solid #eaeaea;
		padding: 5px 10px;
	}
	.span-b{
		cursor:pointer;
		font-size: 12px;
		color:#004276;
	}
	.span-b:hover{
		text-decoration:underline;
		color:#ba2636; 
	}
	.span-x{
		color: #ba2636;
		font-size: 12px;
		height: 30px;
		padding: 5px 20px;
		background:url("x.gif")no-repeat 0px 2px;
	}
	.box-b div{
		line-height: 30px;
		margin-bottom: 16px;
	}
	.checkbox{
		margin-right:5px;
		margin-left: 80px;
		width: 13px;
		height: 13px;
	}
	.button{
		cursor:pointer;
		color: #fff;
		border:none;
		background: #008de7;
		margin-left: 80px;
		width: 135px;
		height: 30px;
	}
	.button:hover{
		background:#1a98e8;
	}
	.box-bottom{
		width: 603px;
		height: 6px;
		background:#004276;
	}
</style>
</head>
<body>
   <div class="box">
		<h2>注册凤凰通行证</h2>
		<div class="reg"><p>手机注册</p></div>
		<!-- 里面的盒子 -->
		<div class="box-a">
			<div class="box-b">
				<div><span class="span-1" >图片验证码</span><input style="width:124px;" type="text" name=""><img src="1.jpg"><span class="span-b" style="margin-left: 70px; ">换一个</span></div>
				<div><span class="span-1">手机号</span><input type="text" name=""><span class="span-x">请输入手机号</span></div>
				<div style="height: 30px;"><span class="span-a" >获取验证码</span><span style="font-size: 12px; color:#ba2636; ">24小时之内只能发送三次验证码</span></div>
				<div><span class="span-1">短信验证码</span><input type="text" name=""><span class="span-x">请输入验证码</span></div>
				<div><span class="span-1">密码</span><input type="text" name=""><span class="span-x">请输入密码</span></div>
				<div><span class="span-1">确认密码</span><input type="text" name=""><span class="span-x">请确认密码</span></div>
				<div><input class="checkbox" type="checkbox" name="" checked ='checked'><span style="font-size: 12px;
		color:#666;">我已同意并阅读<span class="span-b">《网络服务协议》</span><span class="span-b">《个人信息保护政策》</span></span></div>
				<div><button class="button">提交注册</button></div>
			</div>
			<div class="box-bottom"><div class="box-bottom" style="float: right;background:#ba2636;width: 180px;"></div></div>
		</div>
   </div>
</body>
</html>